@import "../../public.css";

page {
    background: #F8F8F8
}


.top {
    padding-top  : 10px;
    font-size    : 28px;
    font-weight  : 600;
    text-align   : center;
    line-height  : 60px;
    background   : #fff;
    margin-bottom: 5px;
    width        : 100%;
    position     : fixed;
    top          : 0;
    left         : 0;
    z-index      : 999;
}

.top text {
    color  : #999999;
    margin : 0 20px;
    padding: 0 15px;
    width  : 250px;
    display: inline-block;
}

.top .top-active {
    color        : #3f3f3f;
    border-bottom: 4px solid #3f3f3f
}

.panel-box {
    margin-top    : 100px;
    padding-bottom: 58px;
}

.empty {
    text-align: center;
    margin    : auto auto;

    .img {
        width     : 376px;
        height    : 376px;
        margin-top: 179px;
    }

    .empty-text {
        font-size  : 32px;
        line-height: 45px;
        color      : #9B9B9B;
        margin-top : 40px;
    }

    .empty-text2 {
        font-size  : 32px;
        line-height: 45px;
        font-weight: 600;
        margin-top : 40px;
        color      : #08D4D2;
    }
}

.item {
    background-color: #FFFFFF;
    border-radius   : 16px;
    margin-left     : 40px;
    margin-right    : 40px;
    margin-top      : 24px;
    padding         : 40px 32px;

    .title {
        display        : flex;
        flex-direction : row;
        align-items    : center;
        justify-content: space-between;

        .name {
            font-size  : 32px;
            line-height: 45px;
            color      : #322B33;
            font-weight: 600;
        }

        .right {
            width      : 16px;
            height     : 28px;
            margin-left: 20px;
        }

        .status {
            font-size  : 28px;
            line-height: 40px;
            color      : #08D4D2;
        }
    }

    .item-img {
        margin-top    : 32px;
        display       : flex;
        flex-direction: row;

        .img-service {
            width : 88px;
            height: 88px;
        }

        .text-service {
            font-size  : 28px;
            line-height: 40px;
            margin-left: 20px;
            color      : #373737;
        }
    }

    // .text-time {
    //     font-size  : 24px;
    //     line-height: 33px;
    //     color      : #909090;
    //     margin-top : 16px;
    // }

    .item-bottom {
        display        : flex;
        flex-direction : row;
        justify-content: space-between;

        .appointment {
            font-size  : 24px;
            line-height: 33px;
            color      : #909090;
            margin-top : 16px;

            .box-car {
                margin-top: 16px;
            }
        }
    }

    .cancel-btn {
        margin-top      : 33px;
        width           : 136px;
        height          : 48px;
        line-height     : 48px;
        background-color: #3F3F3F;
        border-radius   : 24px;
        color           : #FFFFFF;
        font-size       : 22px;
        text-align      : center;
    }
}

.no-more {
    color         : #08D4D2;
    font-size     : 24px;
    line-height   : 88px;
    text-align    : center;
    height        : 88px;
    vertical-align: text-top;
}